<template>
	<view class="container">
		<!-- 用户信息 -->
		<view class="funs">
			<view class="u-flex u-flex-items-center u-flex-between user_info">
				<view class="u-flex u-flex-items-center">
					<u-avatar size="40" shape="shape" :src="vuex_user.iconS||'/static/images/avatar.png'" :customStyle="{borderRadius:'16rpx',overflow:'hidden'}"></u-avatar>
					<text class="username">{{vuex_user.name}}</text>
				</view>
			</view>
			<u-grid :border="false" @click="gridClick">
				<u-grid-item>
					<u-icon name="/static/images/client.png" :size="50"></u-icon>
					<text class="grid-text">收顾客款</text>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="/static/images/shop.png" :size="50"></u-icon>
					<text class="grid-text">收店家款</text>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="/static/images/refund.png" :size="50"></u-icon>
					<text class="grid-text">退款</text>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 数据模块 -->
		<view class="business_data">
			<view class="u-flex u-flex-items-center data_title Medium">经营数据</view>
			<u-grid :border="false" align="between" :customStyle="{margin:'0 20rpx'}">
				<u-grid-item bgColor="#FFFFFF" :customStyle="{width:'224rpx',height:'224rpx',borderRadius:'16rpx'}">
					<view class="data_item_text_1">今日销售数额</view>
					<text :selectable="true" class="data_item_text_2 Medium" :style="{transform:`scale(${statistics.todaySaleVolume.length>8?'0.7':'1'})`}">
						{{statistics.todaySaleVolume}}
					</text>
					<text :selectable="true" class="data_item_text_3">
						昨日{{statistics.yesterdaySaleVolume}}
					</text>
				</u-grid-item>
				<u-grid-item bgColor="#FFFFFF" :customStyle="{width:'224rpx',height:'224rpx',borderRadius:'16rpx'}">
					<view class="data_item_text_1">今日单量 (个)</view>
					<text :selectable="true" class="data_item_text_2 Medium" :style="{transform:`scale(${statistics.todayOrderNum.length>8?'0.7':'1'})`}">
						{{statistics.todayOrderNum}}
					</text>
					<text :selectable="true" class="data_item_text_3">
						昨日{{statistics.yesterdayOrderNum}}
					</text>
				</u-grid-item>
				<u-grid-item bgColor="#FFFFFF" :customStyle="{width:'224rpx',height:'224rpx',borderRadius:'16rpx'}">
					<view class="data_item_text_1">今日客单价</view>
					<text :selectable="true" class="data_item_text_2 Medium" :style="{transform:`scale(${statistics.todayUnit.length>8?'0.7':'1'})`}">
						{{statistics.todayUnit}}
					</text>
					<text :selectable="true" class="data_item_text_3">
						昨日{{statistics.yesterdayUnit}}
					</text>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 订单明细 -->
		<view class="u-flex u-flex-items-center u-flex-between order_details" @click="$u.route({url:'/pages/refund/refundDetails/refundDetails'})">
			<text>订单明细</text>
			<u-icon size="16" color="#999999" name="arrow-right"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		findByUser,
		homePageData
	} from '@/config/api.js';
	export default {
		data() {
			const d = new Date()
			const year = d.getFullYear()
			let month = d.getMonth() + 1
			month = month < 10 ? `0${month}` : month
			const date = d.getDate()
			return {
				startDate: `${year}-${month}-${date-1}`,
				endDate: `${year}-${month}-${date}`,
				statistics: {
					endDate: "",
					payee: "",
					startDate: "",
					todayOrderNum: "0",
					todaySaleVolume: "0",
					todayUnit: "0",
					yesterdayOrderNum: "1",
					yesterdaySaleVolume: "10",
					yesterdayUnit: "0"
				}
			}
		},
		onLoad(options) {
			var that = this;
			let token = that.getQuery("token");
			let userId = that.getQuery("userId");
			// 测试使用
			// token = "ca4a129504b4db60beda08d75df64415";
			// userId = 1918;
			// end
			that.$u.vuex('vuex_token', token);
			that.$u.vuex('vuex_userId', userId);
			that.getHomePageData();
		},
		onShow() {
			var that = this;
			if (uni.$u.test.isEmpty(that.vuex_token) === false) {
				that.getHomePageData();
			}
		},
		onReady() {
			var that = this;
			uni.showLoading({ //等待渲染dom
				mask: true
			});
			that.$nextTick(() => { //渲染完成
				uni.hideLoading();
			});
			that.getFindByUser();
		},
		onPullDownRefresh() {
			var that = this;
			if (uni.$u.test.isEmpty(that.vuex_token) === false) {
				that.getHomePageData();
			}
		},
		methods: {
			getFindByUser() {
				var that = this;
				let params = {
					token: that.vuex_token,
					userId: that.vuex_userId
				}
				findByUser(params).then(res => {
					that.$u.vuex('vuex_user', res.data);
				}).catch(err => {
					console.log('findByUser=', err);
				});
			},
			getHomePageData() {
				var that = this;
				let params = {
					token: that.vuex_token,
					startDate: that.startDate,
					endDate: that.endDate
				};
				homePageData(params).then(res => {
					that.statistics = res.data;
					uni.stopPullDownRefresh();
				}).catch(err => {
					console.log('homePageData=', err);
				});
			},
			gridClick(index) {
				switch (index) {
					case 0:
						uni.$u.route({
							url: 'pages/charge_customers/charge_customers'
						});
						break;
					case 1:
						uni.showModal({
							title: '提示',
							content: '博美祺店家回款时，请联系店家进入“博美祺”微信小程序，选择相应的对账单进行支付',
							showCancel: false
						});
						// uni.$u.route({
						// 	url: 'pages/charge_shops/charge_shops'
						// });
						break;
					case 2:
						uni.$u.route({
							url: 'pages/refund/refundDetails/refundDetails'
						});
						break;
				}
			},
			getQuery(name) {
				// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				let r = window.location.search.substr(1).match(reg);
				console.log(r);
				if (r != null) {
					// 对参数值进行解码
					if (name == 'activityDay') {
						return decodeURIComponent(r[2]);
					} else {
						return r[2];
					}
				}
				return null;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;

		.container {

			.funs {
				height: 334rpx;
				background: #4179FF;

				.user_info {
					height: 96rpx;
					padding: 0 48rpx;
					margin-bottom: 30rpx;

					.username {

						font-size: 30rpx;
						color: #FFFFFF;
						line-height: 34rpx;
						margin-left: 16rpx;
					}
				}

				.grid-text {

					font-size: 28rpx;
					color: #FFFFFF;
					margin-top: 14rpx;
				}
			}

			.business_data {
				background-color: #F8F8F8;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				margin-top: -23rpx;

				.data_title {
					height: 92rpx;
					padding: 0 48rpx;

					font-size: 32rpx;
					color: #333333;
				}

				.data_item_text_1 {

					font-size: 28rpx;
					color: #333333;
				}

				.data_item_text_2 {

					font-size: 44rpx;
					color: #333333;
					margin-top: 22rpx;
				}

				.data_item_text_3 {

					font-size: 26rpx;
					color: #999999;
					margin-top: 14rpx;
				}
			}

			.order_details {
				height: 120rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 20rpx 0 28rpx;
				margin: 20rpx 20rpx 0;

				text {

					font-size: 30rpx;
					color: #333333;
				}
			}
		}
	}
</style>